<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>案件枚数生産性</title>
<jsp:include page="../basePage/head.jsp" />
<style type="text/css">	
	#caseName{width:200px;}
	#rankID {width:150px}
	#dateField{width:120px} 
</style>
<script>
	$(function() {
		//设置默认日期 
		//开始日期：上个月 结束日期 当前日期
		var toDate = getCurrentDay();
		var fromDate =  getPriorMonthDay();
		
		//日期选择框格式化
 		$( "#dateFrom" ).datepicker({ dateFormat: 'yy-mm-dd'}).val(fromDate);
		$( "#dateTo" ).datepicker({ dateFormat: 'yy-mm-dd'}).val(toDate);
	 	
		//设置dateField
		$("#dateField").multiselect({selectedList: 1,header:false, multiple: false,noneSelectedText:""}) ;
					
	 	// 配置jqGrid组件  
    	var $gridTable=$("#gridTable").jqGrid({  
        	//url: "caseNumberQuery.action",  
        	datatype: "local",  //为local时初始化不加载，支持json，xml等   
        	mtype: "GET",  
        	height: 350,  
        	/* width: "100%", */
        	autowidth: true,  
        	colNames: ["受信日付","納品日付","顧客","案件","帳票ID","帳票名称","受信枚数","納品枚数","入力時間"],
        	colModel: [  
	            {name:"receiptDate",index:"receiptDate",width:120,sortable:true, sorttype: 'date', align:"center", resizable:true,formatter:'date', formatoptions:{newformat:"Y-m-d"}, frozen : false},  
	            {name:"oridReceiveDate",index:"oridReceiveDate",width:120,sortable:true, sorttype: 'date', align:"center", resizable:true,formatter:'date',formatoptions:{newformat:"Y-m-d"}, frozen : false}  ,
	            {name:"customerID",index:"customerID",width:120,sortable:true, align:"left", resizable:true},
	            {name:"caseName",index:"caseName",width:60,sortable:true, resizable:true},
	            {name:"formID",index:"formID",width:60,sortable:true, resizable:true},                
	            {name:"formName",index:"formName",width:300,sortable:true, resizable:false, resizable:true} ,
	            
	            {name:"receiptCount",index:"receiptCount",width:60,sortable:true, sorttype: 'number', align:"right", resizable:true} ,
	            {name:"deliveryCount",index:"deliveryCount",width:60,sortable:true,sorttype: 'number', align:"right", resizable:true} ,
	            {name:"entryTime",index:"entryTime",width:80,sortable:true,sorttype: 'number', align:"right", resizable:true} 
        	],  
        	viewrecords: true,  
        	rowNum: 25,  
        	rowList: [25,50,100],  
        	loadonce: true,
        	jsonReader: {  
            	root:"gridModel",       // (2)  
            	records: "record",      // (3)  
            	repeatitems : false     // (4)  
        	},  
        	pager: "#gridPager",  
        	caption: "案件枚数生産性",  
        	hidegrid: false,
        	toolbar: [false,"top"] ,       
        	rownumbers: true,
        	rownumWidth: 20,
        	shrinkToFit: false
    	});  	
	
 		//Frozen 		
 		$("th[role='columnheader']:eq(2)").find("span:first-child").first().after("<span id='lock' class='lock'></span>");
		$gridTable.jqGrid('destroyFrozenColumns')  	  		  	  
		.jqGrid('setColProp','receiptDate' , {frozen:true})
		.jqGrid('setColProp','oridReceiveDate' , {frozen:true})
  	  	.jqGrid('setFrozenColumns')
	  	.trigger('reloadGrid', [{current:true}]);		
 		
 		
		 //$gridTable.jqGrid('setFrozenColumns');  
 		
  		//调用函数 显示 或者隐藏列
  		//函数位置 js/jqgridHideShowCols.js
  		//showHideColumn("gridTable",3);
  		$gridTable.jqGrid('navGrid','#gridPager',{add:false,edit:false,del:false,search:false,refresh:false});
      	$gridTable.jqGrid('navButtonAdd','#gridPager',{ caption: "",title: "列を表示／隠す",
      		onClickButton : function ()	{ jQuery("#gridTable").jqGrid('columnChooser'); }});
      	
	 	 
		//search button格式化
		$("#buttonSearch").button().click(function( event ) {
			$gridTable.jqGrid("setGridParam",{
				url:"caseNumberQuery!refreshGridModel.action?"+ $("#dataForm").serialize(),
    			datatype:'json'
    		}).trigger("reloadGrid", [{page:1}]);				 
			event.preventDefault();				 
		});
	
		$("th[role='columnheader']").mouseenter(  function(){
 		 	var index = $(this).index();						
			$(".lock").remove();						 			 			
		  	$(this).find("span:first-child").first().after("<span id='lock' class='lock'></span>");
		  	$(this).find("#lock").click(function(){		  		
		  		var cm = $gridTable.jqGrid("getGridParam", "colModel");
		  		for(var i=0;i<cm.length;i++)
		  			$gridTable.jqGrid('setColProp',cm[i].name  , {frozen:false});
		  		$gridTable.jqGrid('destroyFrozenColumns');
		  	  	for(var i=1;i<=index;i++)		  	  
		  	  		$gridTable.jqGrid('setColProp',cm[i].name  , {frozen:true});
		  	  	$gridTable.jqGrid('setFrozenColumns')
		  	  		.trigger('reloadGrid', [{current:true}]);		  	  		  		
		  	})   
		}).mouseleave(function(){			
			$(".lock").remove();
	 		   var lockcol=-1;
			$("th[role='columnheader']").find("#lock").remove();			
			var cm = $gridTable.jqGrid("getGridParam", "colModel");
			for(var i=0;i<cm.length;i++)
 				lockcol == cm[i].frozen == true ? i : lockcol;		   			 			
 			$("th[role='columnheader']:eq("+lockcol+")").find("span:first-child").first().after("<span id='lock' class='lock''></span>"); 
		});		
				
		$(window).bind('resize', function() {	    	 	    	 
	 		$("#gridTable").setGridWidth($("#dataForm").width()-5);	    	 
	 		$("#gridTable").setGridHeight ($(window).height()-$("#dataForm").height()-91);	    	 
		}).trigger('resize');		                  		 
	});
	
</script>
</head>


<body style="font-size:15px;font-weight:400;margin: 0;padding:">

<s:form id="dataForm" theme="simple" >			
	<table style="white-space:nowrap">
		<tr>
			<th>  時間</th><td ><s:select name="dateField" id="dateField" list="#{'receiptdate':'受信时间','oridreceivedate':'纳品时间'}"    istKey="key" listValue="value"  multiple="true"></s:select></td>				
			<th>  時間帯</th><td ><s:textfield id="dateFrom" name="dateFrom" key="value" label="开始日" cssClass="datebox" /></td>				
			<th>  ～</th><td ><s:textfield id="dateTo" name="dateTo" key="value" label="结束日" cssClass="datebox" /></td>
			<td width=30></td>
			<td><a id="buttonSearch" href="#" id="buttonSearch" class="button">検索</a></td>
		</tr>
	</table>
</s:form>

<table id="gridTable" style="margin: 0;padding: 0"></table> 
<div id="gridPager" style="height:38px;margin: 0;padding: 0"></div>  	 
 
</body>
</html>